<template>
  <div class="order">
    <nav-bar title="订单列表" />

    <van-tabs v-model:active="activeName">
      <template v-for="(item, index) in orderTitles" :key="item">
        <van-tab :title="item" :name="index">
          <template v-for="iten in orderData" :key="iten.orderId">
            <order-list-item :order-data="iten" />
          </template>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import { storeToRefs } from 'pinia'

  import NavBar from '@/components/nav-bar/nav-bar.vue'
  import orderListItem from './cpns/order-list-item.vue'

  import useOrderStore from '@/stores/modules/order'

  // 定义变量
  const activeName = ref()
  const orderTitles = ["全部订单", "近期订单", "待支付"]
  const orderTitleType = ["all", "recent", "pend"]

  // 发送网络请求
  const orderStore = useOrderStore()
  orderStore.fetchOrderData()
  const { orderData } = storeToRefs(orderStore)

  // 监听变化发送网络请求
  watch(activeName, (newValue) => {
    if (newValue !== undefined) {
      orderStore.fetchOrderData(orderTitleType[newValue])
    }
  })

</script>

<style lang="less" scoped>
  .order {
    margin-bottom: 60px;
  }
</style>